<template>
  <div style="margin-top: 20px">
    <ko-card :title="$t('business.configuration.certificate')">
      <el-form ref="form" label-position="top" :model="editForm">
        <el-card
          v-for="(row, ind) in editForm.tls"
          v-bind:key="ind"
          style="
            background-color: #292a2e;
            margin-top: 10px;
            position: relative;
          "
        >
          <div
            style="
              float: right;
              margin-top: -15px;
              position: relative;
              z-index: 1;
            "
          >
            <el-button
              v-if="editForm.tls.length > 1"
              type="text"
              @click="onRemoveTls(ind)"
              >{{ $t("commons.button.delete") }}
            </el-button>
          </div>
          <div style="margin-top: 20px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  :label="
                    $t('business.configuration.certificate') + '- Secret Name'
                  "
                >
                  <el-select v-model="row.secretName" style="width: 100%">
                    <el-option
                      label="Default Ingress Controller Certificate"
                      value=""
                    />
                    <el-option
                      v-for="(secret, index) in secrets"
                      v-bind:key="index"
                      :label="secret.metadata.name"
                      :value="secret.metadata.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-row :gutter="20">
                  <div style="margin-top: 5px">
                    <el-col :span="24">
                      <span>Hosts</span>
                    </el-col>
                    <div v-for="(host, index) in row.hosts" v-bind:key="index">
                      <el-col :span="20">
                        <span v-if="false">{{ host }}</span>
                        <el-input
                          v-model="row.hosts[index]"
                          style="margin-top: 5px"
                        />
                      </el-col>
                      <el-col :span="2">
                        <el-button type="text" @click="onRemoveHost(row, index)"
                          >{{ $t("commons.button.delete") }}
                        </el-button>
                      </el-col>
                    </div>
                    <div>
                      <el-col :span="24">
                        <el-button
                          style="margin-top: 10px"
                          @click="onAddHost(row)"
                          >{{ $t("commons.button.add") }} Host
                        </el-button>
                      </el-col>
                    </div>
                  </div>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-form>
      <div style="margin-top: 10px">
        <el-button @click="onAddTls"
          >{{ $t("commons.button.add")
          }}{{ $t("business.configuration.certificate") }}</el-button
        >
      </div>
    </ko-card>
  </div>
</template>

<script setup lang="ts">
import KoCard from "@/views/domain/kubeHud/views/components/ko-card/index.vue";
import { useK8SApi } from "../../../api/k8s";
import { onMounted, ref, watch } from "vue";
// import { listSecretsWithNs } from "@/api/secrets";
const { secretRepo } = useK8SApi();

type Prop = {
  cluster: string;
  namespace: string;
  tlsArray: any[];
};

const props = defineProps<Prop>();
const emit = defineEmits(["update:tlsArray"]);

const editForm = ref({
  tls: []
});

const secrets = ref([]);

const getSecrets = () => {
  secretRepo
    .getSecret({ clusterName: props.cluster, namespace: props.namespace })
    .then(res => {
      secrets.value = res.items;
    });
};

const onRemoveTls = (index: number) => {
  editForm.value.tls.splice(index, 1);
};

const onAddTls = () => {
  editForm.value.tls.push({
    secretName: "",
    hosts: []
  });
};

const onAddHost = (row: any) => {
  row.hosts.push("");
};

const onRemoveHost = (row: any, index: number) => {
  row.hosts.splice(index, 1);
};

watch(
  () => props.namespace,
  (nv, ov) => {
    if (nv !== ov) {
      editForm.value.tls.forEach(e => (e.secretName = ""));

      getSecrets();
    }
  }
);

onMounted(() => {
  editForm.value.tls = props.tlsArray ?? [{ secretName: "", hosts: [] }];
  getSecrets();
});
</script>

<style scoped></style>
